<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 马蜂窝</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/home.css">
    <script src="./js/data.js"></script>
</head>

<body>
    <!-- 顶部导航栏盒子 -->
    <div class="header">
        <div class="head-logo">
            <a class="mfw-logo" href="javascript:;" title="马蜂窝自由行">
                <img src="./images/header-sprites15@2x.png" alt="">
            </a>
        </div>
        <!-- 顶部导航栏左侧盒子 -->
        <ul class="head-left-nav">
            <li class="head-nav-item">
                <a href="javascript:;" class="nav-item nav-first">首页</a>
            </li>
            <li class="head-nav-item">
                <a href="./destination.html" class="nav-item">目的地</a>
            </li>
            <li class="head-nav-item">
                <a href="./travel-strategy.html" class="nav-item">旅游攻略</a>
            </li>
            <li class="nav-sales">
                <a href="./toTravel.html" class="sales-item">去旅行</a>
                <!-- 去旅行下拉框 -->
                <ul id="nav-sales">
                    <li><a href="./toTravel.html" class="sales-li-a">自由行</a></li>
                    <li><a href="./toTravel_packageTour.html" class="sales-li-a">跟团游</a></li>
                    <li><a href="javascript:;" class="sales-li-a">当地游</a></li>
                    <li><a href="javascript:;" class="sales-li-a">游轮</a></li>
                    <li><a href="./toTravel-visa.html" class="sales-li-a">签证</a></li>
                </ul>
            </li>
            <li class="head-nav-item">
                <a href="./ticket.html" class="nav-item">机票火车票</a>
            </li>
            <li class="head-nav-item">
                <a href="./hotel.html" class="nav-item">订酒店</a>
            </li>
            <li class="nav-community">
                <a href="javascript:;" style="cursor: default;" class="community-item">社区</a>
                <!-- 社区下拉框盒子 -->
                <div class="panel-wrapper">
                    <!-- 社区下拉框盒子左侧列表 -->
                    <ul class="list-left">
                        <li><a href="javascript:;">问答</a></li>
                        <li><a href="javascript:;">马蜂窝周边</a></li>
                        <li><a href="javascript:;">蜂首</a></li>
                        <li><a href="javascript:;">结伴</a></li>
                    </ul>
                    <!-- 社区下拉框盒子右侧列表 -->
                    <ul class="list-right">
                        <li><a href="javascript:;">小组论坛</a></li>
                        <li><a href="javascript:;">分舵同城</a></li>
                        <li><a href="javascript:;">马蜂窝拍卖行</a></li>
                        <li><a href="javascript:;">照片PK</a></li>
                        <li><a href="javascript:;">真人兽</a></li>
                        <li><a href="javascript:;">道具商店</a></li>
                    </ul>
                </div>
            </li>
            <li class="head-nav-item">
                <a href="javascript:;" class="nav-item">APP</a>
            </li>
            <li class="head-nav-item">
                <a href="./tourist.html" class="nav-item mfwzx">
                    <img src="./images/mfwzx.png" alt="">
                </a>
            </li>
        </ul>
        <!-- <div class="head-search">
            <input type="text">
            <i></i>
        </div> -->
        <!-- 顶部导航栏右侧侧盒子 -->
        <ul class="head-right-nav">
            <!-- 微信、QQ、微博图标 -->
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;">登录</a></li>
            <li><span>|</span></li>
            <li><a href="javascript:;">注册</a></li>
        </ul>
    </div>

    <!-- 轮播图盒子 -->
    <div class="banner">
        <!-- 轮播图导航图 -->
        <div class="banner-nav">
            <!-- 轮播图导航图列表 -->
            <ul class="banner-list">
                <li><img src="./images/1-26.jpg" alt=""></li>
                <li><img src="./images/2-25.jpg" alt=""></li>
                <li><img src="./images/3-24.jpg" alt=""></li>
                <li><img src="./images/4-23.jpg" alt=""></li>
                <li><img src="./images/5-22.jpg" alt=""></li>
            </ul>
            <div class="show-mose">
                <a href="javascript:;"></a>
            </div>
        </div>
        <!-- 轮播图搜索栏盒子 -->
        <div class="search-group">
            <ul>
                <li><i></i><span>全部</span></li>
                <li><i></i><span>酒店</span></li>
                <li><i></i><span>目的地</span></li>
                <li><i></i><span>去旅行</span></li>
                <li><i></i><span>机票</span></li>
            </ul>
            <!-- 全部 -->
            <div class="search-all-box search-item">
                <div class="search-currency">
                    <input type="text" class="search-input" placeholder="搜目的地/攻略/酒店/旅行特价">
                </div>
                <!-- 搜索按钮盒子 -->
                <div class="sousuo">
                    <i></i>
                </div>
            </div>
            <!-- 酒店 -->
            <div class="search-hotel-box search-item">
                <div class="search-hotel">
                    <div class="search-input">
                        <input type="text" placeholder="请输入国家、地区、城市名称">
                    </div>
                    <div class="check-in">
                        <input type="text" placeholder="未定" readonly="readonly">
                        <i></i>
                    </div>
                    <div class="check-out">
                        <input type="text" placeholder="未定" readonly="readonly">
                        <i></i>
                    </div>
                </div>
                <div class="sousuo">
                    <i></i>
                </div>
            </div>
            <!-- 目的地 -->
            <div class="search-mdd-box search-item">
                <div class="search-currency">
                    <input type="text" class="search-input" placeholder="我要去...">
                </div>
                <div class="sousuo">
                    <i></i>
                </div>
            </div>
            <!-- 去旅行 -->
            <div class="search-sales-box search-item">
                <div class="search-currency">
                    <input type="text" class="search-input" placeholder="产品名称/目的地/优惠">
                </div>
                <div class="sousuo">
                    <i></i>
                </div>
            </div>
            <!-- 机票 -->
            <div class="search-flight-box search-item">
                <div class="search-flight">
                    <!-- 出发输入框盒子 -->
                    <div class="flight-start">
                        <div class="hidden">
                            <input type="text" placeholder="广州" id="flight-start">
                        </div>
                        <div class="place-box">
                            <div class="search-history">
                                <span id="history">搜索历史:</span>
                                <ul id="history-list">
                                </ul>
                            </div>
                            <!-- 地点首字母导航栏列表 -->
                            <div class="place-nav">
                                <div class="place-nav-item start-nav">国内热门</div>
                                <div class="place-nav-item start-nav">ABCDE</div>
                                <div class="place-nav-item start-nav">FGHJ</div>
                                <div class="place-nav-item start-nav">KLMNP</div>
                                <div class="place-nav-item start-nav">QRSTW</div>
                                <div class="place-nav-item start-nav">XYZ</div>
                            </div>
                            <!-- 地点列表 -->
                            <ul class="place-id">
                            </ul>
                        </div>
                    </div>
                    <!-- 出发和到达地点互换按钮盒子 -->
                    <div class="search-input-exchange">
                        <img src="./images/wKgEaVy1QDmAJy1YAAAC0ZrtOdM370.png" alt="">
                    </div>
                    <!-- 到达输入框盒子 -->
                    <div class="flight-end">
                        <div class="hidden">
                            <input type="text" placeholder="选择城市" id="flight-end">
                        </div>
                        <div class="place-box">
                            <div class="search-history">
                                <span id="history">搜索历史:</span>
                                <ul id="history-list">
                                </ul>
                            </div>
                            <!-- 地点首字母导航栏列表 -->
                            <div class="place-nav">
                                <div class="place-nav-item end-nav">国内热门</div>
                                <div class="place-nav-item end-nav">ABCDE</div>
                                <div class="place-nav-item end-nav">FGHJ</div>
                                <div class="place-nav-item end-nav">KLMNP</div>
                                <div class="place-nav-item end-nav">QRSTW</div>
                                <div class="place-nav-item end-nav">XYZ</div>
                            </div>
                            <!-- 地点列表 -->
                            <ul class="place-id">
                            </ul>
                        </div>
                        <i></i>
                    </div>
                    <!-- 日期选择 -->
                    <div class="start-date">
                        <input type="text" placeholder="" readonly="readonly">
                        <i></i>
                    </div>
                </div>
                <div class="sousuo">
                    <i></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 中心内容大盒子 -->
    <div class="container">
        <!-- 中心内容顶部导航栏盒子 -->
        <div class="sales-entrys-container-innerimg">
        </div>
        <!-- 内容盒子 -->
        <div class="container-box">
            <!-- 左侧内容盒子 -->
            <div class="container-left">
                <!-- 安全提示图标盒子 -->
                <div class="safety-prevention">
                    <a href="javascript:;">
                        <img src="./images/index-link-v2.png" alt="">
                    </a>
                </div>
                <!-- 小轮播图盒子 -->
                <div class="box-traveller">
                    <!-- 头部标签盒子 -->
                    <div class="traveller-hd">
                        <h2 class="hd-title">
                            <a href="javascript:;">旅行家专栏</a>
                        </h2>
                        <a class="hd-right">专栏首页</a>
                    </div>
                    <!-- 小轮播图内容盒子 -->
                    <div class="traveller-banner">
                        <!-- 轮播图图片列表 -->
                        <ul id="traveller-ban">
                            <li>
                                <img src="./images/little_banner01.jpeg" alt="">
                                <h3>夏木尼，小王子的玫瑰城市</h3>
                                <p>夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。</p>
                            </li>
                            <li>
                                <img src="./images/little_banner02.jpeg" alt="">
                                <h3>暹粒油淋鱼</h3>
                                <p>默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。</p>
                            </li>
                            <li>
                                <img src="./images/little_banner03.jpeg" alt="">
                                <h3>西安：旧长安的画皮</h3>
                                <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                            </li>
                            <li>
                                <img src="./images/little_banner04.jpeg" alt="">
                                <h3>漫山岛</h3>
                                <p>漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。</p>
                            </li>
                            <li>
                                <img src="./images/little_banner05.jpeg" alt="">
                                <h3>胡日尔镇的美术馆</h3>
                                <p>我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。</p>
                            </li>
                            <li>
                                <img src="./images/little_banner01.jpeg" alt="">
                                <h3>夏木尼，小王子的玫瑰城市</h3>
                                <p>夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。</p>
                            </li>
                        </ul>
                        <!-- 轮播图信息列表 -->
                        <div class="ban-list">
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧内容盒子 -->
            <div class="container-right">
                <!-- 右侧内容导航栏盒子 -->
                <div class="right-navbar">
                    <!-- 右侧内容导航栏 -->
                    <ul class="tn-nav">
                        <!-- 热门游记按钮 -->
                        <li class="nav-hot">
                            <a href="javascript:;" class="active">热门游记</a>
                            <!-- 筛选按钮 -->
                            <span><i></i>筛选<input type="text"></span>
                        </li>
                        <!-- 最新发表盒子 -->
                        <li class="nav-new">
                            <a href="javascript:;">最新发表</a>
                        </li>
                    </ul>
                    <!-- 写游记按钮盒子 -->
                    <div class="btn-add">
                        <a href="javascript:;"><i></i>写游记</a>
                    </div>
                    <!-- 筛选按钮下拉内容盒子 -->
                    <div class="tn-dropdown-pop">
                        <span class="del">&times;</span>
                    </div>
                </div>
                <!-- 右侧中心内容盒子 -->
                <div class="right-content">
                    <!-- 内容列表 -->
                    <div class="tn-list">
                    </div>
                    <!-- 页数列表盒子 -->
                    <div class="page-nav">
                        <!-- 页数列表 -->
                        <ul class="page-list">
                            <!-- 上一页按钮 -->
                            <a href="javascript:;">
                                <li id="prev">&laquo;上一页</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num active">1</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">2</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">3</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">4</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">5</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">6</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">7</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">8</li>
                            </a>
                            <a href="javascript:;">
                                <li class="page-num">9</li>
                            </a>
                            <!-- 下一页按钮 -->
                            <a href="javascript:;">
                                <li id="next">下一页&raquo;</li>
                            </a>
                        </ul>
                        <!-- 显示有多少页、多少条信息 -->
                        <div class="page-box">
                            共<span id="page-sum"></span>页/<span id="page-piece"></span>条
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部盒子 -->
    <footer>
        <div class="ft-content">
            <!-- ul加二维码 -->
            <div class="ft-info">
                <dl>
                    <dt>马蜂窝旅游网</dt>
                    <dd>中国年轻代用得更多的旅游网站</dd>
                    <dd>上亿旅行者共同打造的<span>"旅行神器"</span></dd>
                    <dd><span>60,000</span> 多个全球旅游目的地</dd>
                    <dd><span>600,000</span> 个细分目的地新玩法</dd>
                    <dd><span>760,000,000</span> 次攻略下载</dd>
                    <dd><span>38,000</span> 家旅游产品供应商</dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><span>关于马蜂窝</span><span>联系我们</span></dd>
                    <dd><span>隐私政策</span><span>商标声明</span></dd>
                    <dd>服务协议</dd>
                    <dd>商城平台服务协议</dd>
                    <dd>网络信息侵权通知指引</dd>
                    <dd>马蜂窝旅游网服务监督员</dd>
                    <dd>网站地图<span>加入马蜂窝</span></dd>
                </dl>
                <dl>
                    <dt>旅行服务</dt>
                    <dd>旅游攻略</dd>
                    <dd>酒店预订</dd>
                    <dd>旅游特价</dd>
                    <dd>国际租车</dd>
                    <dd>旅游问答</dd>
                    <dd>旅游保险</dd>
                    <dd>旅游指南</dd>
                    <dd>订火车票</dd>
                    <dd>旅游资讯</dd>
                    <dd>APP下载</dd>
                    <dd><span>旅行商城全球商家入驻</span></dd>
                </dl>
                <div class="pic">
                    <div class="pic-1">
                        <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90"
                            alt="">
                        <p>马蜂窝APP<br>扫描立即下载</p>
                    </div>
                    <div class="pic-2">
                        <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90"
                            alt="">
                        <p>马蜂窝旅游<br>订阅号</p>
                    </div>
                    <div class="pic-3">
                        <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90"
                            alt="">
                        <p>马蜂窝良品<br>官方服务号</p>
                    </div>
                </div>
            </div>

            <!-- 旅游之前,先上马蜂窝! -->
            <div class="ft-center">
                <p>旅游之前,先上马蜂窝!</p>
                <ul>
                    <li><a href="#"><i></i></a></li>
                    <li><a href="#"><i></i></a></li>
                </ul>

            </div>

            <!-- 底部信息 -->
            <div class="ft-copyright">
                <div class="ft-copyright-top">
                    <div class="left"></div>
                    <p>@ 2021 Mafengwo.cn 京ICP备11015476号。<img
                            src="https://images.mafengwo.net/images/footer/police_record.png">京公网安备11010502013401号京ICP证110318号
                    </p>
                    <pre>网络出版服务许可证 增值电信业务经营许可证 营业执照广 播电视节目制作经营许可证 网络文化许可证 网上有害信息举报专区 帮助中心</pre>
                    <p>违法和不良信息举报电话: 010- 83416877举报邮箱: mfwjubao@mafengwo.com涉末成年人不良信息专用举报邮箱:
                        wcnjubao@mafengwo.com全国旅游投诉电话: 12301</p>
                    <p>马蜂窝客服 : 国内<span>4006 345-678</span> 海外 <span>+86- 10-8341-6888</span></p>
                </div>
                <!-- 三张图片 -->
                <div class="ft-copyright-bottom">
                    <a href="#"><span class="p1"></span></a><a href="#"><span class="p2"></span></a><a href="#"><span
                            class="p3"></span></a>
                </div>
            </div>
        </div>
    </footer>

    <div class="box"></div>

    <!-- 侧边导航栏盒子 -->
    <div class="mfw-toolbar">
        <!-- 返回顶部盒子 -->
        <div class="btn-gotop">
            <a href="javascript:;">
                <i></i>
                <em>返回顶部</em>
            </a>
        </div>
        <!-- 意见反馈盒子 -->
        <div class="btn-opinion">
            <a href="javascript:;">
                <i></i>
                <em>意见反馈</em>
            </a>
        </div>
        <!-- 二维码盒子 -->
        <div class="btn-code">
            <a href="javascript:;">
                <i></i>
                <div class="code-img">
                    <img src="https://p1-q.mafengwo.net/s1/M00/6C/51/wKgIC1t_6TuASybrAADGUPUHjr021.jpeg" alt="">
                </div>
            </a>
        </div>
    </div>

    <script src="./js/jQuery.js"></script>
    <script src="./js/home.js"></script>
    <script>
        $(function () {
            //获取可视窗口到页面顶部的距离,以及轮播图盒子的高度再减去60px的距离
            var ttop,
                Height = $(".banner").height() - 60
            $(".btn-gotop").hide()
            $(window).scroll(function () {
                ttop = $(window).scrollTop()
                //当可视窗口向下滚动时,ttop增加,(ttop / Height)趋近于1,大于等于1时显示返回顶部盒子
                if ((ttop / Height) >= 1) {
                    $(".btn-gotop").show()
                } else {
                    $(".btn-gotop").hide()
                }
                // 侧边导航栏盒子随可视窗口滚动时设置位置限制
                if (ttop >= 1900) {
                    $(".mfw-toolbar").css({
                        position: "absolute",
                        top: "2455px"
                    })
                } else if (ttop >= 440) {
                    $(".mfw-toolbar").css({
                        position: "fixed",
                        top: "560px"
                    })
                } else {
                    $(".mfw-toolbar").css({
                        position: "fixed",
                        top: "605px"
                    })
                }
            })
        })
    </script>
</body>

</html>